<script setup>
import { ref } from 'vue'
import { findRequireTodoApi } from '@/apis/projectManagement'
import { dayjs } from 'element-plus'
import router from '@/router'
import avatarName from '@/components/avatarName'

const filePrefix = process.env.VUE_APP_BASE_URL
const tableData = ref([])
const t = ref()

findRequireTodoApi().then(res => {
  if (res.data.length === 0) return
  const data = res.data
  for (let i = 0; i < data.length; i++) {
    const projectIndex = tableData.value.findIndex((project) => project.id === data[i].project.id)
    if (projectIndex === -1) {
      tableData.value.push({
        id: data[i].project.id,
        name: data[i].project.name,
        total: 1,
        children: [{
          id: data[i].task.id,
          name: data[i].task.name,
          status: data[i].task.status,
          endTime: data[i].task.endTime,
          owner: data[i].task.owner,
          createTime: data[i].task.createTime,
          taskId: data[i].task.id,
          groupId: data[i].task.workGroup.id,
          projectId: data[i].task.project.id,
          isTask: true,
          children: [{
            id: data[i].require.id,
            name: data[i].require.name,
            status: data[i].require.status,
            endTime: data[i].require.endTime,
            owner: data[i].require.owner,
            taskId: data[i].task.id,
            groupId: data[i].task.workGroup.id,
            projectId: data[i].task.project.id,
            taskName: data[i].task.name,
            priority: data[i].require.priority,
            createTime: data[i].require.createTime,
          }]
        }],
      })
      continue
    }
    if (projectIndex !== -1) {
      const project = tableData.value[projectIndex]
      const taskIndex = project.children.findIndex((task) => task.id === data[i].task.id)
      if (taskIndex === -1) {
        project.total++
        project.children.push({
          id: data[i].task.id,
          name: data[i].task.name,
          status: data[i].task.status,
          endTime: data[i].task.endTime,
          owner: data[i].task.owner,
          createTime: data[i].task.createTime,
          taskId: data[i].task.id,
          groupId: data[i].task.workGroup.id,
          projectId: data[i].task.project.id,
          isTask: true,
          children: [{
            id: data[i].require.id,
            name: data[i].require.name,
            status: data[i].require.status,
            endTime: data[i].require.endTime,
            owner: data[i].require.owner,
            taskId: data[i].task.id,
            groupId: data[i].task.workGroup.id,
            projectId: data[i].task.project.id,
            taskName: data[i].task.name,
            priority: data[i].require.priority,
            createTime: data[i].require.createTime,
          }]
        })
        continue
      }
      project.total++
      project.children[taskIndex].children.push({
        id: data[i].require.id,
        name: data[i].require.name,
        status: data[i].require.status,
        endTime: data[i].require.endTime,
        owner: data[i].require.owner,
        taskId: data[i].task.id,
        groupId: data[i].task.workGroup.id,
        projectId: data[i].task.project.id,
        taskName: data[i].task.name,
        priority: data[i].require.priority,
        createTime: data[i].require.createTime,
      })
    }
  }
})

const endTimeFormatter = (row) => {
  if (row.endTime) {
    return dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
  }
  return null
}

const createTimeFormatter = (row) => {
  if (row.createTime) {
    return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
  }
  return null
}

const statusFormatter = (row) => {
  const status = row.status
  if (row.isTask && status === 0) {
    return '未开始'
  }
  if (status === 0) {
    return '已排期'
  }
  if (status === 1) {
    return '进行中'
  }
  if (status === 2) {
    return '已完成'
  }
  if (status === 3) {
    return '已延期'
  }
}

const GoTo = (scope) => {
  const row = scope.row
  if (row.isTask) {
    router.push(`/system/projectManagement/projectTask/projectTaskDetails?taskId=${ row.taskId }&groupId=${ row.groupId }&name=${ row.name }&projectId=${ row.projectId }`)
    return
  }
  router.push(`/system/projectManagement/projectTask/projectRequireDetails?id=${ row.id }&projectId=${ row.projectId }&name=${ row.taskName }&taskId=${ row.taskId }&groupId=${ row.groupId }&requireName=${ row.name }`)
}

const onClickRowHandle = (row, column, event) => {
  for (let i = 0; i < t.value.length; i++) {
    t.value[i].toggleRowExpansion(row)
  }
}


</script>

<template>
  <el-empty v-if="tableData.length === 0" description="暂时没有待办任务" />
  <el-card v-else v-for="t in tableData" :key="t.id" shadow="hover" style="margin-bottom: 12px;">
    <div class="project-name"
         style="display: flex; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #ebeef5">
      <h2 @click.stop="router.push(`/system/projectManagement/projectDetails?id=${t.id}`)" style="cursor: pointer;">{{
          t.name
        }} </h2>
      <div>（{{ t.total }}）</div>
    </div>

    <el-table
        :data="t.children"
        ref="t"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        @row-click="onClickRowHandle"
    >
      <el-table-column label="标题">
        <template #default="scope">
          <span @click.stop="GoTo(scope)" style="cursor: pointer;">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100px" :formatter="statusFormatter" />
      <el-table-column label="优先级" width="100px">
        <template #default="scope">
          <el-button v-if="scope.row.priority === 2" type="danger" size="small">高</el-button>
          <el-button v-if="scope.row.priority === 1" type="primary" size="small">中</el-button>
          <el-button v-if="scope.row.priority === 0" type="success" size="small">低</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="预计结束" width="200px" :formatter="endTimeFormatter" />
      <el-table-column label="负责人" width="200px">
        <template #default="scope">
          <avatar-name :url="scope.row.owner.avatar ? filePrefix + scope.row.owner.avatar : scope.row.owner.name"
                       :name="scope.row.owner.name" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="createTimeFormatter" />
    </el-table>
  </el-card>

</template>

<style scoped lang="less">
:deep(.el-table--enable-row-hover) .el-table__body tr:hover > td,
.project-name:hover {
  color: #409eff;
}
</style>